<template>
  <div class="tool-detail">
    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
      <div class="sm:flex items-start mt-5">
        <div class="sm:flex-1 sm:w-0">
          <div class="bar-title break-words mb-5"
            v-if="comparisons !== null">
            <h2>
              <span class="text-26 font-semibold text-gray-1000 group-hover:text-purple-1300">
                {{$t('detail_whatIs',{toolName:toolName})}}
              </span>
            </h2>
          </div>
          <h2 class="bar-title mb-5 break-words"
            v-else>
            <span class="text-gray-1000 text-xl font-medium break-words w-full">{{$t('productInformation')}} {{toolName}}</span>
          </h2>
          <p class="text-base leading-8 text-gray-1000 break-words"
            v-if="tool_website.what_is || tool.description">
            {{tool_website.what_is ? tool_website.what_is :tool.description}}
            <!-- {{getLocaleText(tool.description, tool.description_locales)}} -->
          </p>

          <div class="border-t border-gray-2000 mt-4 mb-4"
            v-if="tool.description"></div>

          <div class="pl-3 space-y-4"
            v-if="tool.created_at">
            <p class="min-dot text-gray-1000 text-base break-words">
              {{$t('addedOn')}}&nbsp;{{$formattedDate(tool.created_at, fI18n, locale)}}
            </p>
            <p class="min-dot text-gray-1000 text-base break-words">
              <span v-if="tool.attributes && tool.attributes.length>0">{{$t('provides')}} {{tool.attributes | fAttributes}}.&nbsp;</span>{{$t('detail_overMonthlyVisits',{monthVisitedCount: vReset(tool.month_visited_count)})}}
            </p>
          </div>

          <div class="flex items-start flex-wrap mt-5 gap-x-3 gap-y-3">
            <template v-for="(tItem, tKey) in tool.attributes">
              <div class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label"
                v-for="(cItem, cKey) in tItem.options"
                :key="`${tItem.handle}-${cItem.handle}-${tKey}-${cKey}`">
                {{cItem.name}}
              </div>
            </template>

            <template v-for="(tItem, tKey) in tool.categories">
              <common-link path="/category/:handle"
                v-if="tKey < 10"
                :params='{handle:tItem.handle }'
                class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label hover:bg-purple-1300 hover:text-white go-category-link"
                :key="tKey">{{tItem.name}}</common-link>
            </template>
            <el-popover placement="top"
              popper-class="w-11/12 max-w-md categories-popover"
              v-if="tool.categories && tool.categories.length > 10"
              :trigger="_isMobile() ? 'click':'hover'">
              <div class="flex items-start flex-wrap gap-x-3 gap-y-3 px-3 py-3">
                <template v-for="(tItem, tKey) in tool.categories">
                  <common-link path="/category/:handle"
                    v-if="tKey >= 10"
                    :params='{handle:tItem.handle }'
                    class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl px-3 py-1 hover:bg-purple-1300 hover:text-white go-category-link"
                    :key="tKey">{{tItem.name}}</common-link>
                </template>
              </div>
              <div slot="reference"
                class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label more-icon flex items-center justify-center hover:bg-purple-1300 hover:text-white">
                <svg-icon className="text-sm mt--3"
                  iconName='shenglue'></svg-icon>
              </div>
            </el-popover>

            <div class="text-base text-gray-1800 border border-yellow-1100 bg-yellow-1200 max-w-max truncate rounded-2xl t-label flex items-center justify-center"
              :title="$t('monthlyVisits')">
              <svg-icon className="text-sm mt--3"
                iconName='similarweb'></svg-icon>
              <span class="ml-2">{{tool.month_visited_count | vResetVisit }}</span>
            </div>
          </div>
        </div>
        <div class="mt-5 sm:mt-0 sm:ml-9 w-full w-pic">
          <a :href="tool.website"
            rel="dofollow"
            target="_blank"
            class="block rounded-lg w-full overflow-hidden tool-pic to-view-btn relative group"
            @click="handleExp">
            <common-image class="sm:h-49 w-full"
              :src="tool.image"
              :alt="toolName"
              :lazy="false"></common-image>
            <div class="visitWebsite hidden group-hover:flex text-2xl sm:text-3xl">
              {{$t('deatil_visitWebsite')}}
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="bg-purple-1600 py-2.5 my-7"
      v-if="recommendList && recommendList.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <h3 class="text-26 leading-normal text-purple-1300 font-semibold break-words mb-2">{{$t('recommend_youMayLike')}}</h3>
        <div class="tools grid gap-5 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          <min-tool v-for="(item, key) in recommendList"
            :isSearch="false"
            :key="item.handle+'-'+key"
            :toolPosIndex="key"
            toolPosition="工具详情-推荐"
            :toolsData="item"
            :lazyLoad="false"
            :isShowTraffic="false"></min-tool>
        </div>
      </div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4"
      v-else>
      <div class="border-t border-gray-2000 mt-10 mb-14"></div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="traffic && JSON.stringify(traffic)!=='{}' && traffic!==null">
      <tool-detail-website-traffic :traffic="traffic"></tool-detail-website-traffic>
      <div class="border-t border-gray-2000 mt-10 sm:mt-12 mb-0"></div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 pt-11 pb-11">
      <div class="flex items-center gap-x-16 sm:gap-x-14 gap-y-6 flex-wrap sm:flex-nowrap">
        <div class="flex-1 w-full sm:w-0">
          <h2 class="bar-title break-words">
            <span class="text-gray-1000 text-26 font-semibold break-words w-full">
              {{$t('detail_launchEmbeds')}}
            </span>
          </h2>
          <p class="mt-4 text-base text-gray-1000 leading-8">
            {{$t('detail_launchEmbeds_desc')}}
          </p>
        </div>
        <div class="flex-shrink-0 max-w-fll w-full sm:w-auto sm:px-14">
          <support :tool="tool"
            v-model="theme"
            :title="title"></support>

          <div class="flex items-center mt-3">
            <div class="border border-gray-1600 rounded h-10 flex-1 flex items-center justify-center cursor-pointer text-sm text-gray-1000 hover:text-purple-1300 hover:border-purple-1300 px-1.5"
              @click="toCopy">
              {{$t('detail_copy_embed_code')}}
            </div>
            <el-tooltip effect="dark"
              placement="top"
              class="text-sm text-gray-1500 ml-3 flex-shrink-0 hover:text-purple-1300 cursor-pointer">
              <div slot="content"
                style="max-width: 300px;">
                {{ $t('detail_how_to_install_desc') }}
              </div>
              <span>{{$t('detail_how_to_install')}}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gray-2600 py-10 md:py-12"
      v-if="tool_website && tool_website.how_to_use !== '' && tool_website.how_to_use !== null">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <div class="md:flex items-center justify-between gap-32">
          <h2 class="bar-title text-gray-1000 text-26 font-semibold break-words">
            <span>
              {{$t('detail_how_to_use',{toolName: toolName})}}
            </span>
          </h2>
          <p class="mt-5 md:mt-0 text-lg leading-8 text-gray-1000 break-words md:w-3/5">
            {{tool_website.how_to_use}}
          </p>
        </div>
      </div>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 py-10 md:py-12 content-visibility-auto"
      v-if="tool_website && Array.isArray(tool_website.core_features) && tool_website.core_features.length > 0">
      <tool-detail-core-features :tool="tool"
        :core_features="tool_website.core_features"
        :toolName="toolName">
      </tool-detail-core-features>
    </div>

    <div class="bg-purple-1300 bg-opacity-6 py-10 md:py-12 content-visibility-auto"
      v-if="tool_website && Array.isArray(tool_website.use_cases) && tool_website.use_cases.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <tool-detail-use-case :tool="tool"
          :use_cases="tool_website.use_cases"
          :toolName="toolName">
        </tool-detail-use-case>
      </div>
    </div>

    <!-- AI套餐 -->
    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="tool_website && Array.isArray(tool_website.pricing) && tool_website.pricing.length > 0">
      <tool-detail-ai-prices class="mt-12"
        :tool="tool"
        :pricing="tool_website.pricing"
        :toolName="toolName">
      </tool-detail-ai-prices>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="traffic && JSON.stringify(traffic)!=='{}' && traffic!==null">
      <tool-detail-traffic class="mt-12 traffic"
        :tool="tool"
        :toolName="toolName"
        :traffic="traffic">
      </tool-detail-traffic>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="tool.prices && tool.prices.length>0">
      <tool-detail-prices class="mt-12 mb-12"
        :tool="tool"
        :toolName="toolName">
      </tool-detail-prices>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="tool_website && Array.isArray(tool_website.faq) && tool_website.faq.length > 0">
      <tool-detail-faq class="mt-12"
        :tool="tool"
        :faq="tool_website.faq"
        :toolName="toolName">
      </tool-detail-faq>
    </div>

    <div class="mt-15 flex justify-center"
      v-if="hasRealVal(tool.has_review) && tool.has_review === 1">
      <common-link path="/review/:handle"
        target="_blank"
        :params="{ handle: tool.handle}"
        class="mt-4 sm:mt-0 flex items-center justify-between h-12 px-3 text-base border border-gray-1200 duration-100 hover:border-purple-1300 rounded group whitespace-nowrap">
        <span class="text-base text-gray-1000 group-hover:text-purple-1300">
          {{ $t('review_tooLReview', {toolName: toolName}) }}
        </span>
        <svg-icon className="ml-5 text-base text-gray-1000 group-hover:text-purple-1300"
          iconName='arrow_right'></svg-icon>
      </common-link>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="tool.categories && tool.categories.length>0">
      <tool-detail-categories class="mt-12"
        :tool="tool"
        :toolName="toolName">
      </tool-detail-categories>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="toolsList && toolsList.length>0">
      <tool-detail-alternative class="mt-12"
        :tool="tool"
        :toolsList="toolsList"
        :comparisons="comparisons"
        :toolName="toolName">
      </tool-detail-alternative>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="comparisons && comparisons !== null && comparisons.length > 0">
      <tool-detail-comparisons class="mt-12 comparisons"
        :tool="tool"
        :comparisons="comparisons"
        :toolName="toolName">
      </tool-detail-comparisons>
    </div>

    <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4 content-visibility-auto"
      v-if="tool_website && Array.isArray(tool_website.tags) && tool_website.tags.length > 0">
      <tool-detail-tags class="mt-12"
        :tool="tool"
        :tags="tool_website.tags"
        :toolName="toolName">
      </tool-detail-tags>
    </div>
  </div>
</template>

<script>
import CopyToClipboard from 'copy-to-clipboard'
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'ToolDetailSecond',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    traffic: {
      type: Object,
      default: function () {
        return {}
      },
    },
    comparisons: {
      type: Array | null,
      default: null,
    },
    toolsList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
    tool_website: {
      type: Object | null,
      default: null,
    },
    cLoading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String | null,
      default: null,
    },
    recommendList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
    toolName: {
      type: String,
      default: '',
    },
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
    fAttributes: function (val) {
      let text = ''

      if (val && val.length > 0) {
        val.forEach((item) => {
          item.options.forEach((tItem) => {
            text = `${text}${text !== '' ? ', ' : ''}${tItem.name}`
          })
        })
      }
      return text
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  mixins: [mixinsExposure],
  data() {
    return {
      faqs: [
        {
          title: 'deatil_faq01_title',
          desc: 'deatil_faq01_desc',
          show: false,
        },
        {
          title: 'deatil_faq02_title',
          desc: 'deatil_faq02_desc',
          show: false,
        },
        {
          title: 'deatil_faq03_title',
          desc: 'deatil_faq03_desc',
          show: false,
        },
        {
          title: 'deatil_faq04_title',
          desc: 'deatil_faq04_desc',
          show: false,
        },
        {
          title: 'deatil_faq05_title',
          desc: 'deatil_faq05_desc',
          show: false,
        },
        {
          title: 'deatil_faq06_title',
          desc: 'deatil_faq06_desc',
          show: false,
        },
        {
          title: 'deatil_faq07_title',
          desc: 'deatil_faq07_desc',
          show: false,
        },
      ],

      baseUrl:
        process.env.NODE_ENV === 'development'
          ? 'http://192.168.3.221:8033'
          : 'https://www.toolify.ai',

      theme: 'light',
    }
  },
  methods: {
    ...mapActions(['exposure']),
    resetPath(tHandle, cHandle) {
      let query = {}
      query.attributes = `${tHandle}-${cHandle}`
      return query
    },
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },

    async addOrCancleFavorites() {
      this.$emit('addOrCancleFavorites')
    },
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
    faqShow(item) {
      item.show = !item.show
    },
    vReset(val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    getCategory(category) {
      let cText = ''
      if (category && category.length > 0) {
        category.forEach((item) => {
          cText = `${cText}${cText !== '' ? ', ' : ''}${item.name}`
        })
      }
      return cText
    },
    toCopy() {
      const featuredUrl = `<a href="https://www.toolify.ai/tool/${this.$route.params.handle}/?ref=embed" target="_blank" style="cursor: pointer;"><img src="https://cdn.toolify.ai/featured_${this.theme}.svg" style="width: 250px; height: 60px;" width="250" height="60" alt="${this.title}"></a>`

      try {
        CopyToClipboard(featuredUrl)
        this.$message.success(this.$t('featuredUrlCopySuccess'))
      } catch (e) {
        this.$message.error(this.$t('featuredUrlCopyFail'))
      }
    },
    _isMobile() {
      if (process.browser) {
        let flag = navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
        return flag
      } else {
        return false
      }
    },
    handleExp: _.throttle(function () {
      let exporeData = this.getExporeData(this.tool, null, null, false, {
        target_url: this.tool.website,
        page_position: 'Visit Website',
      })
      this.exposure({
        ...exporeData,
      })
    }, 2000),
  },
}
</script>
<style lang='scss' scoped>
.tool-detail {
  .dot {
    position: relative;
    &::before {
      position: absolute;
      left: -16px;
      top: 13px;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #2f3032;
    }
  }
  .min-dot {
    position: relative;
    &::before {
      position: absolute;
      left: -12px;
      top: 9px;
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #2f3032;
    }
  }

  .t-label {
    padding: 4px 12px;
  }
  .more-icon {
    height: 34px;
  }

  .tool-comparisons,
  .tool-traffic,
  .tool-prices,
  .tool-categories,
  .tool-faq {
    ::v-deep h2 {
      text-align: center;
    }
  }
  .tool-categories {
    ::v-deep .categories-list {
      margin-top: 40px !important;
      display: grid !important;
      padding: 0 0px;
      gap: 20px !important;
    }
  }

  .tool-prices {
    ::v-deep .prices-flex {
      display: flex !important;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      .price-item {
        width: 366px;
        max-width: 100%;
      }
    }
  }
}
@media (min-width: 640px) {
  .tool-detail {
    .tool-categories {
      ::v-deep .categories-list {
        padding: 0 20px;
        margin-top: 18px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
  }
}
@media (min-width: 768px) {
  .tool-detail {
    .tool-categories {
      ::v-deep .categories-list {
        padding: 0 40px;
        margin-top: 24px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }
  }
}
@media (min-width: 1024px) {
  .tool-detail {
    .tool-prices {
      ::v-deep .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }
  }
}
</style>